<template>
  <div>
    <head-view></head-view>
    <div class="main">
      <div class="item">
        <div class="lef">
          <dl>
            <dt class="title">我的账户</dt>
            <dd>个人中心</dd>
            <dd>消息通知</dd>
            <dd>个人信息</dd>
            <dd>安全设置</dd>
            <dd>地址管理</dd>
            <dd>我的积分</dd>
            <dd>我的足迹</dd>
            <dd>邀请有礼</dd>
            <dd>新云抽奖</dd>
          </dl>
          <dl>
            <dt class="title">交易管理</dt>
            <dd>我的订单</dd>
            <dd>优惠券</dd>
            <dd>礼品卡</dd>
            <dd>评价晒单</dd>
            <dd>售后服务</dd>
          </dl>
          <dl>
            <dt class="title">我的收藏</dt>
            <dd>收藏的商品</dd>
            <dd>收藏的专题</dd>
            <dd>关注的品牌</dd>
          </dl>
          <dl>
            <dt class="title">帮助中心</dt>
            <dd>帮助中心</dd>
            <dd>在线客服</dd>
          </dl>
        </div>
        <div class="rig">
          <div class="t">
            <div class="logo"></div>
            <p>元宝机车梦</p>
            <img src="../../assets/img/hy.png" alt="" class="hy" />
          </div>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>我的收藏</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >查看全部</el-button
              >
            </div>
            <div class="content">
              <div class="sp">
                <img src="../../assets/img/2.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥134</p>
              </div>
              <div class="sp">
                <img src="../../assets/img/3.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥134</p>
              </div>
              <div class="sp">
                <img src="../../assets/img/4.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥134</p>
              </div>
              <div class="sp">
                <img src="../../assets/img/5.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥134</p>
              </div>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>我的足迹</span>
              <el-button style="float: right; padding: 3px 0" type="text"
                >查看全部</el-button
              >
            </div>
            <div class="content">
              <div class="sp">
                <img src="../../assets/img/1.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥159</p>
              </div>
              <div class="sp">
                <img src="../../assets/img/1.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥159</p>
              </div>
              <div class="sp">
                <img src="../../assets/img/1.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥159</p>
              </div>
              <div class="sp">
                <img src="../../assets/img/1.jpg" alt="" class="spImg" />
                <p class="p1">管制纵月叫吧热线图xxx</p>
                <p class="p2">xxxxxx</p>
                <p class="p3">￥159</p>
              </div>
            </div>
          </el-card>
          <div class="bar">
            <div class="top">猜你喜欢</div>
            <div class="car">
              <el-carousel indicator-position="outside" trigger="click">
                <el-carousel-item v-for="item in 4" :key="item">
                  <div class="content">
                    <div class="sp">
                      <img src="../../assets/img/6.jpg" alt="" class="spImg" />
                      <p class="p1">管制纵月叫吧热线图xxx</p>
                      <p class="p2">xxxxxx</p>
                      <p class="p3">￥159</p>
                    </div>
                    <div class="sp">
                      <img src="../../assets/img/7.png" alt="" class="spImg" />
                      <p class="p1">管制纵月叫吧热线图xxx</p>
                      <p class="p2">xxxxxx</p>
                      <p class="p3">￥159</p>
                    </div>
                    <div class="sp">
                      <img src="../../assets/img/8.png" alt="" class="spImg" />
                      <p class="p1">管制纵月叫吧热线图xxx</p>
                      <p class="p2">xxxxxx</p>
                      <p class="p3">￥159</p>
                    </div>
                    <div class="sp">
                      <img src="../../assets/img/9.png" alt="" class="spImg" />
                      <p class="p1">管制纵月叫吧热线图xxx</p>
                      <p class="p2">xxxxxx</p>
                      <p class="p3">￥159</p>
                    </div>
                  </div>
                </el-carousel-item>
              </el-carousel>
            </div>
          </div>
        </div>
      </div>
    </div>
    <img src="../../assets/img/foot_box.png" alt="" class="footImg" />
  </div>
</template>

<script>
import HeadView from "@/components/HeadView.vue";
export default {
  name: "myView",
  components: { HeadView },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main {
  width: 100%;
  height: 1700px;
  padding-top: 20px;
  background: #eee;
}
.item {
  width: 1400px;
  height: 1700px;
  margin: 0 auto;
  display: flex;
  // background: red;
  .lef {
    width: 260px;
    height: 1080px;
    margin-right: 50px;
    background: #fff;
  }
  .rig {
    width: 1100px;
    // height: 1000px;
    // background: pink;
    .t {
      width: 1100px;
      height: 120px;
      background: url(../../assets/img/header.png) no-repeat;
      background-size: 100%;
      display: flex;
      line-height: 120px;
      .logo {
        width: 80px;
        height: 80px;
        border-radius: 50%;
        background: url(../../assets/img/rwm.png);
        margin: 20px 20px 0 50px;
      }
      .hy {
        width: 400px;
        height: 80px;
        margin: 20px 0 0 330px;
      }
    }
  }
}
dl {
  margin-left: 60px;
}
.title {
  font-size: 27px;
  margin-top: 20px;
}
dd {
  width: 260px;
  margin: 20px 0;
}
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
.clearfix {
  height: 100px;
  line-height: 100px;
  font-size: 28px;
}
.el-button {
  margin: 36px 20px 0 0;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  background: #fff;
  margin: 40px 0;
}
.content {
  display: flex;
  .sp {
    width: 240px;
    height: 300px;
    margin-right: 28px;
    .spImg {
      width: 240px;
      height: 180px;
    }
    .p1 {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 150px;
      margin: 0 auto;
      font-size: 18px;
    }
    .p2 {
      width: 60px;
      margin: 8px auto;
    }
    .p3 {
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      width: 100px;
      margin: 0 auto;
      font-size: 25px;
      color: red;
    }
  }
}
.footImg {
  width: 100%;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  padding-left: 20px;
}

.el-carousel__item:nth-child(2n + 1) {
  padding: 27px 0 0 30px;
}
.bar {
  height: 450px;
  background: #fff;
}
.top {
  height: 120px;
  line-height: 120px;
  padding-left: 50px;
  font-size: 27px;
}
</style>